<template>
  <BottomDrawer
    :visible="addVisible"
    :title="dataType.dataType === 0 ? '挂号费' : '挂号费'"
    :width="584"
    @close="addVisible = false"
  >
    <div style="padding: 0 0 0 28px;overflow-x: hidden;">
          <PageForm
            ref="pageForm"
            v-if="addVisible"
            :list="list"
            :labelPosition="'left'"
            :form-data="formData"
            :rules="rules"
          >
            <template #doctorId>
              <el-select
                v-model="formData.doctorId" filterable
                class="m-2"
                placeholder="医生" clearable
                style="width: 400px"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.empId"
                  :label="item.empName"
                  :value="item.empId"
                />
              </el-select>
            </template>
            <template #assistantId>
              <el-select
                v-model="formData.assistantId" filterable
                class="m-2"
                placeholder="助理医生"
                style="width: 400px" clearable
              >
                <el-option
                  v-for="item in userList"
                  :key="item.empId"
                  :label="item.empName"
                  :value="item.empId"
                />
              </el-select>
            </template>
          </PageForm>
    </div>

    <template #footer>
      <el-button @click="handleSubmit" :loading="loadingBtn" type="primary"
        >确定</el-button
      >
      <el-button @click="addVisible = false">取消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
// import { addShift ,updateShift} from '@/api/register/index';
import { feeGetSelectList } from '@/api/account';
import {
  getDoctorFeeList,
  addDoctorFee,
  updateDoctorFee,
  deleteDoctorFee,
} from '@/api/registerMoney';
import type {
  RegisterMoneyTable,
  RegisterMoneyInfo,
  RegisterForm,
} from '@/types/registerMoney';
const loadingBtn = ref<boolean>(false);

const rules = reactive<FormRules<RegisterMoneyInfo>>({
  doctorId: [{ required: true, message: '请选择医生', trigger: 'change' }],
  firstVisitFee: [
    { required: true, message: '请输入初诊费用', trigger: 'blur' },
  ],
  followUpFee: [{ required: true, message: '请输入复诊费用', trigger: 'blur' }],
  emergencyFee: [
    { required: true, message: '请输入急诊费用', trigger: 'blur' },
  ],
  appointmentFee: [
    { required: true, message: '请输入预约费用', trigger: 'blur' },
  ],
  visitTime: [
    {
      required: true,
      message: '请输入间隔;表示几分钟看一个病人',
      trigger: 'blur',
    },
  ],
  assistantId: [
    { required: true, message: '请选择助理医生', trigger: 'change' },
  ],
});

const formData = ref<RegisterMoneyInfo>({
  doctorId: '',
  firstVisitFee: null,
  followUpFee: null,
  emergencyFee: null,
  appointmentFee: null,
  visitTime: null,
  assistantId: '',
});

// 获取序列列表
const pageForm = ref();
const dataType = defineProps<{ dataType: Number }>();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

defineExpose<{
  open: () => void;
  open1: (menu: RegisterMoneyInfo) => void;
}>({
  open: () => {
    addVisible.value = true;
    formData.value = {
      doctorId: '',
      firstVisitFee: null,
      followUpFee: null,
      emergencyFee: null,
      appointmentFee: null,
      visitTime: null,
      assistantId: '',
    };
    feeGetSelectListApi();
  },
  open1: (menu: RegisterMoneyInfo) => {
    formData.value = menu;
    feeGetSelectListApi();

    addVisible.value = true;
  },
});

const addVisible = ref(false);

const userList = ref<any>();
const feeGetSelectListApi = async () => {
  let res = await feeGetSelectList();
  if (res.code == 200) {
    userList.value = res.data;
    
  }else{
    //ElMessage.error(res.msg)
  }
};

const list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        label: '医生',
        prop: 'doctorId',
        componentProps: {
          width: '403px',
          slotName: 'doctorId',
          placeholder: '医生',
        },
        labelWidth: '100px',
        selectGroupOptions: userList,
        component: 'slotName',
      },
      {
        span: 24,
        component: 'input',
        prop: 'visitTime',
        labelWidth: '100px',
        componentProps: {
          placeholder: '看病时段',
          width: '300px',
          rightText: '分钟/患者',
          textLmargin: '36px',
        },
        label: '看病时段',
      },

      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'firstVisitFee',
        componentProps: {
          width: '360px',
          rightText: '元',
          placeholder: '初诊费用',
        },
        label: '初诊',
      },
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        componentProps: {
          width: '360px',
          rightText: '元',

          placeholder: '复诊费用',
        },
        prop: 'followUpFee',
        label: '复诊',
      },
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'emergencyFee',
        componentProps: {
          width: '360px',
          rightText: '元',

          placeholder: '急诊费用',
        },
        label: '急诊',
      },
      {
        span: 24,
        component: 'input',
        componentProps: {
          rightText: '元',

          placeholder: '预约费用',
          width: '360px',
        },
        labelWidth: '100px',
        prop: 'appointmentFee',
        label: '预约',
      },
      {
        span: 24,
        label: '助理医生',
        prop: 'assistantId',
        labelWidth: '100px',
        componentProps: {
          placeholder: '助理医生',
          slotName: 'assistantId',
        },
        selectGroupOptions: userList,
        // component: 'select',
        component: 'slotName',
      },
    ],
  },
]);

const addChannelApi = async () => {
  loadingBtn.value = true;
  let data:any = {
    doctorId: formData.value.doctorId,
    firstVisitFee:Number(((formData.value?.firstVisitFee ?? 0) * 100).toFixed(2)),
    followUpFee: Number(((formData.value?.followUpFee ?? 0) * 100).toFixed(2)),
    emergencyFee: Number(((formData.value?.emergencyFee ?? 0) * 100).toFixed(2)),
    appointmentFee: Number(((formData.value?.appointmentFee ?? 0) * 100).toFixed(2)),
    visitTime: formData.value.visitTime,
    assistantId: formData.value.assistantId,
  }
  let res = await addDoctorFee(data);
  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
    closeDrawer();
  } else {
  
  }
  loadingBtn.value = false;
};
const editChannelApi = async () => {
  loadingBtn.value = true;
   let data:any = {
    doctorId: formData.value.doctorId,
    firstVisitFee: Number(((formData.value?.firstVisitFee ?? 0) * 100).toFixed(2)),
    followUpFee: Number(((formData.value?.followUpFee ?? 0) * 100).toFixed(2)),
    emergencyFee: Number(((formData.value?.emergencyFee ?? 0) * 100).toFixed(2)),
    appointmentFee: Number(((formData.value?.appointmentFee ?? 0) * 100).toFixed(2)),
    visitTime: formData.value.visitTime,
    assistantId: formData.value.assistantId,
  }
  let res = await updateDoctorFee(data);
  //console.log(res);
  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
    closeDrawer();
  } else {
   
  }
  loadingBtn.value = false;
};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      if (dataType.dataType === 0) {
        addChannelApi();
      } else {
        editChannelApi();
      }
    } else {
      //console.log('error submit!', fields);
    }
  });
};
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  addVisible.value = false;
  emit('closeDrawer');
};
</script>
<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
